<template>
  <div class="base-page-table">
    <!-- 表格头部插槽 -->
    <div class="handle-table">
      <slot name="handle-table"></slot>
    </div>
    <BaseTable :data="list" :total="total" v-bind="tableConfig" @selectionChange="selectionChange"
      v-model:pageInfo="pageInfo">
      <!-- BaseTable 静态插槽 -->
      <template #money="scope">
        ¥ {{ $filters.formatMoney(scope.row.price) }}
      </template>
      <template #private="scope">
        <el-button type="primary" link> 组件特有插槽{{ scope.row }} </el-button>
      </template>
      <!-- BaseTable 动态插槽 跨组件插槽传递 -->
      <template v-for="item in otherPropSlots" :key="item.prop" #[item.slotName]="scope">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </BaseTable>
  </div>
</template>
<script setup lang="js">
import { watch, ref, onMounted, computed, onBeforeUnmount, nextTick } from "vue";
import { isNotEmptyObject } from "@/utils/tools"
import { useStoreMgShopStore } from "@/store/storeMg/shop";
import { useStoreMgSettlementStore } from "@/store/storeMg/settlement";

const emit = defineEmits(["selectionChange"]);

const props = defineProps({
  // 表格配置项
  tableConfig: {
    type: Object,
    require: true,
  },
  // 映射pinia 名称
  storeName: {
    type: String,
    require: true,
  },
  // 自定义表格查询参数
  otherQueryInfo: {
    type: Object,
    default: () => ({})
  }
});

// pinia
const storeMgShopStore = useStoreMgShopStore();
const storeMgSettlementStore = useStoreMgSettlementStore()

// props.storeName 映射 pinia store $id
const mapList = [storeMgShopStore, storeMgSettlementStore];

// storeName查找对应的pinia
const mapValue = mapList.find((item) => item.$id === props.storeName);

let map = new Map();

// 存入到map
map.set(props.storeName, mapValue);

onMounted(() => {
  initData();
});

// 获取剩余的动态插槽名称
const otherPropSlots = props.tableConfig?.propsList.filter((item) => {
  if (item.slotName === "money" || item.slotName === "private") return false;
  return true;
});

// 分页
const pageInfo = ref({ page: 1, size: 10 });

watch(pageInfo, (newValue) => {
  initData(searchForm.value);
});

// 组件查询条件
const searchForm = ref({})

// 初始化数据
const initData = (queryInfo = {}) => {
  // 不包含查询条件 重置场景
  if (queryInfo == null) {
    searchForm.value = {}
  }
  // queryInfo 有值 使用queryInfo查询
  if (isNotEmptyObject(queryInfo)) {
    searchForm.value = queryInfo
  }
  // 带有分页的查询的选项
  if (props.tableConfig?.showPagination) {
    searchForm.value.page = pageInfo.value.page
    searchForm.value.size = pageInfo.value.size
  }
  // 有自定义的查询参数
  if (isNotEmptyObject(props.otherQueryInfo)) {
    searchForm.value = { ...searchForm.value, ...props.otherQueryInfo }
  }
  map.get(props.storeName).getPageTableData(searchForm.value);
};

// 选择表格
const selectionChange = (value) => {
  emit("selectionChange", value);
};

// 防止内存泄漏 清除map
onBeforeUnmount(() => {
  map.clear();
});

// 表格数据
const list = computed(() => map.get(props.storeName).list);

// 表格总数
const total = computed(() => map.get(props.storeName).total);

defineExpose({ initData });
</script>
<style scoped lang="less">
.base-page-table {
  padding: 10px 15px 45px 15px;
  background-color: #fff;
  border-radius: 15px;
}
</style>